<template>
		<van-pull-refresh class="root" v-model="loading" success-text="刷新成功" @refresh="init">
			<!-- 秒杀商品 -->
			<template v-for="item in goodslist" :key="item.id">
				<div class="item" @click="goto(item.id)">
					<!-- 图片 -->
					<img :src="item.picurl" class="itemImg" />
					<div class="content">
						<!-- 商品名称 -->
						<div class="goodsname">{{ item.goodsname }}</div>
						<!-- 价格 -->
						<div class="price">
							<span>￥</span>{{ item.price }}
						</div>
						<!-- 秒杀按钮 -->
						<div class="btn">
							<div class="msbtn" @click.stop="ms(item.id)">
								秒杀
							</div>
						</div>
					</div>
				</div>
			</template>
		</van-pull-refresh>
</template>

<script setup>
	import {ref,onBeforeMount} from 'vue'
		import {queryGoods} from '@/api/goods.js'
		import {saveOrder} from '@/api/order.js'
		import { showToast ,PullRefresh as  VanPullRefresh} from 'vant';
		import { useRouter } from 'vue-router';
		//商品数据
		const goodslist=ref([]);
		const loading = ref(false);
		//获取路由实例
		const router = useRouter();
		
		//跳转详情页
		function goto(id){
			router.push({path:"/goodsDetail",query:{id}});
			console.log("商品id:",id)
		}
		
		//秒杀  
		async function ms(id){
			 // console.log("秒杀商品:",id)
			let params = {
				"userId":1,
				"goodsId":id
			};
			let res = await saveOrder(params);
			if(res.code == 200){
				if(res.data){
					showToast("抢购成功,订单编号为:"+res.data);//返回订单编号
					// 跳转支付界面并把订单编号传过去  根据订单编号查询订单详情
					 // router.push({path:"/goodsDetail",query:{res.data}});
					console.log("res.data>>>",res.data);
				}else{
					showToast("抢购失败");
				}
			}
		}
		
		
		
		//查询商品
		async function init(){
			let res=await queryGoods();
			if(res.code==200){
				goodslist.value=res.data;
				showToast("查询成功");
				setTimeout(() => {
				        showToast('刷新成功');
						goodslist.value=res.data;
				        loading.value = false;
				      }, 5000);
				console.log("goodslist.value》》》",goodslist.value)
				   // loading.value = false;
			}
		}

	onBeforeMount(() => {
		init();
	});
</script>

<style scoped>
	.root{
		height: 100vh;
		
	}
	.item {
		width: 7.1rem;
		height: 3rem;
		background-color: #fff;
		margin: 0.2rem auto;
	}

	.itemImg {
		width: 2.4rem;
		height: 2.4rem;
		margin: 0.3rem 0.2rem;
	}

	.content {
		/* background-color: antiquewhite; */
		width: 4.1rem;
		height: 2.4rem;
		float: right;
		margin-top: 0.3rem;
		margin-right: 0.2rem;
	}

	.goodsname {
		height: 0.8rem;
		line-height: 0.8rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.price {
		color: #f00;
		font-size: 0.4rem;
		font-weight: bold;
	}

	.price span {
		font-size: 0.28rem;
	}

	.msbtn {
		width: 1rem;
		height: 0.4rem;
		line-height: 0.4rem;
		/* 垂直居中 */
		background-color: #f00;
		color: #fff;
		text-align: center;
		font-size: 0.28rem;
		border-radius: 0.2rem;
	}

	.btn {
		margin-top: 0.3rem;
		display: flex;
		justify-self: end;
		margin-right: 0.2rem;
	}
</style>